<template>
  <div class="threeBarChart" id="id_monthHegelv"></div>
</template>

<script>
import * as echarts from 'echarts';
import { shallowRef,watch } from 'vue'
import {useVisualizingMasterStore} from '/@/stores/visualizingMaster'
import { storeToRefs } from 'pinia';

export default {
  setup() {
    const myChart = shallowRef(null);
    const store = useVisualizingMasterStore()
    const {MonthOutputProductionDate,MonthOutputQualifiedRate} = storeToRefs(store)
    const setChart = (xAxisData,qualifiedRatio)=> {
      let optionLine = {
        heiheight:'150px',
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: [
          {
            top: '2%',
            right: '5%',
            itemWidth: 7,
            itemHeight: 7,
            textStyle: {
              color: '#5CB1C1',
            }
          },
        ],
        grid:
        {
          top: '5%',
          left: '3%',
          right: '5%',
          bottom: '8%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              interval: 0,
              color: '#61B9C8',
              fontSize: 10
            },
            axisLine: {
              show:true,
              symbol: ['none', 'arrow'],
              symbolSize: [6, 6],
              symbolOffset: [0, 5],
              lineStyle: {
                color: '#122C49'
              }
            },
            axisTick: { show: false },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: 'value',
            // min: 0,
            // max: 1000,
            axisLabel: {
              color: '#61B9C8',
              fontSize: 9,
              showMaxLabel: false,
              
            },
            scale: true,
            axisLine: {
              show:true,
              symbol: ['none', 'arrow'],
              symbolSize: [6, 6],
              symbolOffset: [0, 5],
              lineStyle: {
                color: '#122C49'
              }
            },
            axisTick: {
              length: 3
            },
            name: '(合格率)',
            nameGap: -10,
            nameTextStyle: {
              color: '#61B9C8',
              fontSize: 9,
              align: 'right',
              padding: [0, 6, 0, 0]
            },
            splitLine: { show: false }
          }
        ],
        series: [
          {
            name: '合格率',
            type: 'line',
            symbol: 'none',
            barWidth: 8,
            smooth: true,
            data: qualifiedRatio,
            lineStyle: {
              width: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#B21356' // 0% 处的颜色
                },
                {
                  offset: 0.5, color: '#B21356' // 40% 处的颜色
                }, {
                  offset: 1, color: '#F59111' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              } //背景渐变色
            },
            itemStyle: {
              color: 'rgb(212,37,43)'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#A41B68' // 0% 处的颜色
                },
                {
                  offset: 0.5, color: 'rgba(112,20,82,1)' // 40% 处的颜色
                }, {
                  offset: 1, color: 'rgba(112,20,82,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }, //背景渐变色
              origin: 'start'
            }
          }
        ]
      };
      let optionBar = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'cross'        // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: [
          {
            top: '2%',
            right: '5%',
            itemWidth: 7,
            itemHeight: 7,
            textStyle: {
              color: '#5CB1C1',
            }
          },
        ],
        grid:
        {
          top: '5%',
          left: '3%',
          right: '5%',
          bottom: '8%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              interval: 0,
              color: '#61B9C8',
              fontSize: 10
            },
            axisLine: {
              symbol: ['none', 'arrow'],
              symbolSize: [6, 6],
              symbolOffset: [0, 5],
              lineStyle: {
                color: '#122C49'
              }
            },
            axisTick: { show: false },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: '#61B9C8',
              fontSize: 9,
              showMaxLabel: false,
            },
            axisLine: {
              show:true,
              // symbol: ['none', 'arrow'],
              // symbolSize: [6, 6],
              // symbolOffset: [0, 5],
              // lineStyle: {
              //   color: '#122C49'
              // }
            },
            axisTick: {
              length: 3
            },
            name: '(合格率)',
            nameGap: -10,
 
            splitLine: { show: false }
          }
        ],
        series: [
          {
            name: '合格率',
            type: 'bar',

            barWidth: 6,
            smooth: true,
            data: qualifiedRatio,
            lineStyle: {
              width: 2,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#B21356' // 0% 处的颜色
                },
                {
                  offset: 0.5, color: '#B21356' // 40% 处的颜色
                }, {
                  offset: 1, color: '#F59111' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              } //背景渐变色
            },
            itemStyle: {
              color: 'rgb(212,37,43)'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#A41B68' // 0% 处的颜色
                },
                {
                  offset: 0.5, color: 'rgba(112,20,82,1)' // 40% 处的颜色
                }, {
                  offset: 1, color: 'rgba(112,20,82,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }, //背景渐变色
              origin: 'start'
            }
          }
        ]
      };
      if (!myChart.value) myChart.value = echarts.init(document.getElementById('id_monthHegelv'));
      if(xAxisData.length === 1)
        myChart.value.setOption(optionBar);
      else
        myChart.value.setOption(optionLine);
    }
    watch(MonthOutputQualifiedRate, (newVal, oldVal) => {
      setChart(MonthOutputProductionDate.value,MonthOutputQualifiedRate.value)
    }, { deep:true })
    const resize = () => {
      myChart.value && myChart.value.resize()
    }
    return {
      myChart,
      resize
    }
  },
}
</script>

<style lang="less" scoped>
.threeBarChart {
  height: calc(100% - 20px);
  width: 100%;
}
</style>